<html>
<body>
  <h1>Mountains</h1>
<div id="mountains"></div>
<div id="mountains" onload="create()">
	</div>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
	</script>
<script>
var MOUNTAINS = [
  
];
$(document).ready(function(){
	fetch("data.json").then(response => {
  console.log(response.status);
  // → 200
  console.log(response.headers.get("Content-Type"));
  // → text/plain
});

	$.get("data.json", function(data){
        //  alert("Data Loaded: " + data);
		  MOUNTAINS=data;
		  f();
	});

	const f=function(){

	let str="<table border='1px'>"
		for(var i=0;i<MOUNTAINS.length;i++){
			str+="<tr><td>"+MOUNTAINS[i].name+"</td><td>"+MOUNTAINS[i].height+"</td><td>"+MOUNTAINS[i].place+"</td><td>"+"</tr>"	
		}
		str+="</table>";
	$("body").append(str);
	}
console.log("hihi")
})
console.log("haha")
</script>
</body>
</html>